<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul{
			background-color: pink;
			margin: 0;
			padding: 0;
			width: 400px;
		}
		li{
			width:398px;
			height: 20px;
			border: 1px solid black;
			margin: 15px 0px;
			padding: 0px;
			list-style: none;
		}
	</style>
</head>
<body>

	<div id="out">
	   <ul id="inner">
	   	   <li class="lia" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
	   	   <li class="lia" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
	   	   <li class="lib" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
	   	   <li class="lib">class="lib"</li>
	   	   <li class="lib">class="lib"</li>
	   	   <li class="lib">class="lib"</li>
	   </ul>
	</div>
	ul :
	<ul>
		 <li class="lia" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
		 <li class="lia" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
		 <li class="lib" attr-action="setWhat">class="lia" attr-action="setWhat"</li>
		 <li class="lib">class="lib"</li>
		 <li class="lib">class="lib"</li>
		 <li class="lib">class="lib"</li>
	</ul>
</body>
<script type="text/javascript" src="js/js.min.js"></script>
<script type="text/javascript">
	function $bindAction(dom,event,listeners){
		$addEvent(dom,event,function(e){
           var e = e || window.event,
           src = e.target || e.srcElement,
           action,
           returnVal;
           while(src && src !== dom){
           	action = src.getAttribute('attr-action');
           	if(listeners[action]){
           		returnVal = listeners[action]({
           			src : src,
           			e : e,
           			action : action
           		});
           		// 如果上面的函数执行之后返回false，停止继续“冒泡”
           		if(returnVal === false){
           			break;
           		}
           	}
           	// 获取当前dom元素的父元素节点
  			src = src.parentNode;
           }
		});
	}
    
    function $addEvent(obj,type,handle){
    	if(!obj || !type || !handle){
    		return;
    	}
    	// 绑定事件到多个对象，递归调用
    	if(obj instanceof Array){
    		for (var i = 0; i < obj.length; i++) {
    			$addEvent(obj[i],type,handle);
    		}
    		return;
    	}
    	if(type instanceof Array){
    		for (var i = 0; i < type.length; i++) {
    			$addEvent(obj,type[i],handle);
    		}
    		return;
    	}
    // 	下面这一大段用来记录当前页面一共绑定了多少个事件，以及事件的相关信息
  		// 以及某个对象上面绑定的事件id
  		window.__allHandlers = window.__allHandlers || {};
 		window.__Hcounter = window.__Hcounter || 0;
 		function setHandler(obj,type,handler,wrapper){
 			obj._hids = obj._hids || [];
 			var hid = 'h' + window._Hcounter;
 			obj._hids.push(hid);
 			// window._allHandlers[hid] = {
 			// 	type : type,
 			// 	handler : handler,
 			// 	wrapper : wrapper
 			// }
 		}
   //      #这个里面的apply是为了修改绑定事件所执行函数中的this
		 // #这个在低版本的IE中才真正起作用
		 function createDelegate(handle, context) {
			 return function() {
			  	return handle.apply(context, arguments);
			 };
		 }
		  // #绑定事件，记录事件绑定信息
		  if(window.addEventListener){
		  	var wrapper = createDelegate(handle,obj);
		  	 setHandler(obj,type,handle,wrapper)
		  	obj.addEventListener(type,wrapper,false);
		  }
          else if(window.attachEvent){
            var wrapper = createDelegate(handle,obj);
             setHandler(obj,type,handle,wrapper)
            obj.attachEvent('on'+ type,wrapper);  
          }else{
          	obj['on'+ type] = handle;
          }
 
    }

</script>
<script>
	listeners = {
		 setWhat : function(opts) {
			 alert(opts.src.className);
			 return false;
		 }
	};
	window.onload = function(){$bindAction(document.getElementById('out'), ['click'], listeners);}
</script>
</html>